<template>
  <div class="main_left">
    <div class="box top">
      <el-row>
        <el-col :span="12" class="imgcol">
          <span>应安总数</span>
          <span class="bold-blue">{{ hostObj.maxHost }}</span>
        </el-col>
        <el-col :span="12" class="imgcol">
          <span>纳管总数</span>
          <span class="bold-blue">{{ hostObj.totleHost }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="tbcol">
          <img src="@/assets/images/main/001@2x.png" alt="" />
          在线数：<span class="bold-blue"> {{ hostObj.onlinHost }}</span>
        </el-col>
        <el-col :span="12" class="tbcol">
          <img src="@/assets/images/main/001@2x.png" alt="" />
          离线数：<span class="bold-blue"> {{ hostObj.offlinHost }}</span>
          超时：<span class="bold-yellow">{{ hostObj.longTimeHost }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="box center">
      <!-- 标题 -->
      <h1 class="left-title">
        <div>排行Top10</div>
        <el-radio-group v-model="distribution" size="mini" @change="changeTab">
          <el-radio-button label="top">违规文件</el-radio-button>
          <el-radio-button label="longTime">超期未整改</el-radio-button>
        </el-radio-group>
      </h1>
      <div class="content">
        <el-row class="head">
          <el-col :span="2"> 排名 </el-col>
          <el-col :span="6"> IP地址 </el-col>
          <el-col :span="6"> 部门 </el-col>
          <el-col :span="5"> 责任人 </el-col>
          <el-col :span="5"> 文件数量 </el-col>
        </el-row>
        <el-row v-for="(item, index) in topArr">
          <el-col :span="2"
            ><span
              class="roundicon"
              :style="{ background: colorArr[index] || '#3B8BFF' }"
            >
              {{ index + 1 }}</span
            >
          </el-col>
          <el-col :span="6"> {{ item.ip }} </el-col>
          <el-col :span="6"> {{ item.fullDept }} </el-col>
          <el-col :span="5"> {{ item.uname }} </el-col>
          <el-col :span="5">
            <span style="color: #facc29">{{ item.count }}</span>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="box bottom">
      <h1 class="left-title">
        <div>部门违规整改统计</div>
        <el-radio-group v-model="type" size="mini" @change="changeType">
          <el-radio-button label="month">本月</el-radio-button>
          <el-radio-button label="year">本年</el-radio-button>
        </el-radio-group>
      </h1>
      <el-empty v-if="showEmpty" class="empty"></el-empty>
      <dept-violation ref="dept" class="dept" v-else></dept-violation>
    </div>
  </div>
</template>

<script>
import HkTable from "@/components/common/Hk-Table/index.vue";
import {
  hostStatistics,
  orgViolations,
  violationFileTop,
  violationFileTopLongTime,
} from "@/api/mainPage";
import DeptViolation from "./moduleComponments/deptViolation.vue";
export default {
  components: { HkTable, DeptViolation },
  data() {
    return {
      hostObj: {},
      distribution: "top",
      type: "year",
      colorArr: ["#FF3535", "#FA8C16", "#FFC53D", "#33CCCC"],
      topArr: [],
      showEmpty:false,
    };
  },
  methods: {
    // 更改top10
    changeTab(val) {
      if (val == "top") {
        violationFileTop().then((res) => {
          this.topArr = res;
        });
      } else {
        violationFileTopLongTime().then((res) => {
          this.topArr = res;
        });
      }
    },
    // 切换部门违规整改统计
    changeType() {
      orgViolations(this.type).then((res) => {
        this.showEmpty = res.length ==0;
        this.$nextTick(() => {
          this.$refs.dept.getData(res);
      })
      });
    },
    hostStatistics() {
      hostStatistics().then((res) => {
        this.hostObj = res;
      });
    },
  },
  mounted() {
    this.changeTab("top");
    this.hostStatistics();
    this.changeType();
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 11%;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .el-row {
    height: 46%;
    display: flex;
    align-items: center;
  }
  .imgcol {
    height: 100%;
    font-weight: 600;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1.5625rem 0.625rem 2.1875rem;
    background: url(../../../assets/images/main/bg1@2x.png) no-repeat center
      center;
    background-size: 100% 100%;
  }
  .tbcol {
    padding: 0.625rem 1.5625rem 0.625rem 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
    img {
      width: 0.9375rem;
      margin-right: 0.9375rem;
    }
    .bold-blue {
      font-size: 1.25rem;
      font-weight: 500;
      margin-right: 1.875rem;
    }
    .bold-yellow {
      font-size: 1.25rem;
      font-weight: 500;
      color: #facc29;
    }
  }
}
.center {
  height: 58%;
  display: flex;
  flex-direction: column;
  margin: 1.25rem 0;
  &::v-deep {
    .el-radio-button__inner {
      background: url(../../../assets/images/main/tab2@2x.png) no-repeat
        center center !important;
      background-size: 100% 100% !important;
      color: #fff !important;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: url(../../../assets/images/main/tab1@2x.png) no-repeat
        center center !important;
      background-size: 100% 100% !important;
    }
  }
  .content {
    flex: 1;
    padding: 0.625rem 1.25rem 1.25rem;
    .header {
    }
    .el-row {
      padding: 0.625rem;
      height: calc(100% / 11);
      display: flex;
      align-items: center;
      &:nth-of-type(2n + 1) {
        background: rgba(59, 139, 255, 0.2);
      }
    }
  }
  .el-col {
    text-align: center;
  }
  .roundicon {
    width: 1.5625rem;
    height: 1.5625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
  }
}
.bottom {
  height: 28%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .dept {
    flex: 1;
   
  }
  .empty{
    flex: 1;

  }
}
::v-deep{
  .el-empty{
    padding: 0 !important;
    .el-empty__image{
      width: 10rem;
    }
  }
}
</style>